<template>
  <van-pull-refresh v-model="isLoading" @refresh="emit('refresh')">
    <van-list
      class="main"
      :loading="isLoading"
      :finished="finished"
      finished-text="没有更多了"
      :immediate-check="false"
      @load="emit('loadNextPage')"
    >
      <template v-for="(item, index) in list" :key="index">
        <slot name="list-item" :item="item"></slot>
      </template>
    </van-list>
  </van-pull-refresh>
  <van-back-top :bottom="110" :right="30" />
</template>

<script setup>
  const emit = defineEmits(['refresh', 'loadNextPage'])
  const props = defineProps({
    loading: {
      type: Boolean,
      default: false,
    },
    finished: {
      type: Boolean,
      default: false,
    },
    list: {
      type: Array,
      default: () => [],
    },
  })
  const isLoading = ref(false)
  watch(
    () => props.loading,
    val => {
      isLoading.value = val
    }
  )
</script>

<style lang="scss">
  .main {
    position: relative;
    padding: 32px 0;
  }
  .van-back-top {
    width: 88px;
    height: 88px;
    background: #4c82fe;
    border-radius: 16px 16px 16px 16px;
  }
</style>
